<script setup>
const activeIndex = ref(2)
const currentCard = ref(0)
const cardList = [
  {
    title: '标准化 SaaS 方案',
    subTitle: '高效便捷，快速上线',
    content: '即开即用，管理房源、客户和财务，数据安全可靠，定期备份',
    items: ['支持独立客户端', '支持独立管理端', '轻度品牌定制'],
    pic: '/images/home/tissues/saas.png'
  },
  {
    title: '私有化部署方案',
    subTitle: '数据掌控，安全至上',
    content: '满足高数据安全要求，完全掌控数据存储和访问，享有技术支持和升级',
    items: ['独立部署', '个性化定制', '可交付源代码'],
    pic: '/images/home/tissues/syfa.png'
  },
  {
    title: '个性化定制方案',
    subTitle: '全面定制，完美契合',
    content: '大型企业定制功能和界面，由团队协助开发，确保每个细节契合需求',
    items: ['独立部署', '个性化定制', '可交付源代码'],
    pic: '/images/home/tissues/dzfa.png'
  }
]

let cardTimer = null
// 开启计时器
function startCountTime() {
  cardTimer = setInterval(() => {
    currentCard.value = currentCard.value + 1
    if (currentCard.value > 2) {
      currentCard.value = 0
    }
  }, 3000)
}
// 切换卡片
function toggleCard(index) {
  if (cardTimer) {
    clearInterval(cardTimer)
  }
  currentCard.value = index
}

onMounted(() => {
  startCountTime()
})

onUnmounted(() => {
  if (cardTimer) {
    clearInterval(cardTimer)
  }
})
</script>

<template>
  <article class="w-full h-1582px relative">
    <div class="tissue-container"></div>
    <section class="w-full mt-200px px-48">
      <h2 class="text-size-44px leading-62px text-center">适用于不同规模的组织需求</h2>
      <div class="flex justify-center mt-100px">
        <div class="blue-box" :class="activeIndex === 1 ? 'big-box' : 'small-box'" @mouseover="activeIndex = 1">
          <img class="absolute z-10 w-200px h-200px -right-50px top-140px" :class="activeIndex === 1 ? 'big-pic' : 'small-pic'" src="/public/images/home/tissues/geren.png" alt="二房东" />
          <div class="big blue-bg" :class="activeIndex === 1 ? 'active' : ''">
            <div class="text-size-40px text-hex-0077FF font-bold" style="font-family: AlimamaShuHeiTi, AlimamaShuHeiTi">二房东</div>
            <div class="w-212px h-42px bg-hex-D5E6FE text-center leading-42px text-size-20px text-hex-0077FF font-normal mt-36px rounded-21px">便捷高效的管理助手</div>
            <ul class="mt-30px">
              <li class="text-hex-333 leading-32px text-size-18px font-normal">便捷管理房源和租客</li>
              <li class="text-hex-333 leading-32px text-size-18px font-normal">简化租赁流程</li>
              <li class="text-hex-333 leading-32px text-size-18px font-normal">提升租客满意度</li>
            </ul>
            <div class="flex mt-60px">
              <NuxtLink class="full-btn w-152px h-50px leading-50px rounded-8px text-size-18px" to="https://saas.byteox.com/#/login">免费试用</NuxtLink>
              <NuxtLink class="white-btn w-152px h-50px leading-50px text-size-18px border-hex-0A87F8 border-solid border-1px rounded-8px ml-16px">预约演示</NuxtLink>
            </div>
          </div>
          <div class="small blue-bg" :class="activeIndex !== 1 ? 'active' : ''">
            <div class="text-size-32px text-hex-0077FF font-normal" style="font-family: AlimamaShuHeiTi, AlimamaShuHeiTi">二房东</div>
            <div>
              <p class="text-size-28px leading-40px text-hex-0077ff font-semibold tracking-4px">便捷高效</p>
              <p class="text-size-28px leading-40px text-hex-0077ff font-semibold tracking-4px">的管理助手</p>
            </div>
          </div>
        </div>

        <div class="blue-box" :class="activeIndex === 2 ? 'big-box' : 'small-box'" @mouseover="activeIndex = 2">
          <img class="absolute z-10 w-200px h-200px -right-50px top-140px" :class="activeIndex === 2 ? 'big-pic' : 'small-pic'" src="/public/images/home/tissues/xxqy.png" alt="小型企业" />
          <div class="big blue-bg" :class="activeIndex === 2 ? 'active' : ''">
            <div class="text-size-40px text-hex-0077FF font-bold" style="font-family: AlimamaShuHeiTi, AlimamaShuHeiTi">小型企业</div>
            <div class="w-212px h-42px bg-hex-D5E6FE text-center leading-42px text-size-20px text-hex-0077FF font-normal mt-36px rounded-21px">简洁易用的管理系统</div>
            <ul class="mt-30px">
              <li class="text-hex-333 leading-32px text-size-18px font-normal">功能齐全，操作简便</li>
              <li class="text-hex-333 leading-32px text-size-18px font-normal">高效管理房源和租客</li>
              <li class="text-hex-333 leading-32px text-size-18px font-normal">优化财务和运营，降低成本</li>
            </ul>
            <div class="flex mt-60px">
              <NuxtLink class="full-btn w-152px h-50px leading-50px rounded-8px text-size-18px" to="https://saas.byteox.com/#/login">免费试用</NuxtLink>
              <NuxtLink class="white-btn w-152px h-50px leading-50px text-size-18px border-hex-0A87F8 border-solid border-1px rounded-8px ml-16px">预约演示</NuxtLink>
            </div>
          </div>
          <div class="small blue-bg" :class="activeIndex !== 2 ? 'active' : ''">
            <div class="text-size-32px text-hex-0077FF font-normal" style="font-family: AlimamaShuHeiTi, AlimamaShuHeiTi">小型企业</div>
            <div>
              <p class="text-size-28px leading-40px text-hex-0077ff font-semibold tracking-4px">简洁易用</p>
              <p class="text-size-28px leading-40px text-hex-0077ff font-semibold tracking-4px">的管理系统</p>
            </div>
          </div>
        </div>

        <div class="purple-box" :class="activeIndex === 3 ? 'big-box' : 'small-box'" @mouseover="activeIndex = 3">
          <img class="absolute z-10 w-200px h-200px -right-50px top-140px" :class="activeIndex === 3 ? 'big-pic' : 'small-pic'" src="/public/images/home/tissues/zxqy.png" alt="中/大型企业" />
          <div class="big blue-bg" :class="activeIndex === 3 ? 'active' : ''">
            <div class="text-size-40px text-hex-9155FF font-bold" style="font-family: AlimamaShuHeiTi, AlimamaShuHeiTi">中/大型企业</div>
            <div class="w-212px h-42px text-center leading-42px text-size-20px text-hex-9155FF font-normal mt-36px rounded-21px" style="background: rgba(145, 85, 255, 0.1)">灵活高效的管理平台</div>
            <ul class="mt-30px">
              <li class="text-hex-333 leading-32px text-size-18px font-normal">灵活高效，支持多种配置</li>
              <li class="text-hex-333 leading-32px text-size-18px font-normal">管理房源、租客和财务</li>
              <li class="text-hex-333 leading-32px text-size-18px font-normal">提升整体效率</li>
            </ul>
            <div class="flex mt-60px text-size-18px text-center">
              <NuxtLink class="purple-btn w-152px h-50px leading-50px rounded-8px" to="https://saas.byteox.com/#/login">免费试用</NuxtLink>
              <NuxtLink class="w-152px h-50px bg-white leading-50px border-hex-9155FF text-hex-9155FF border-solid border-1px rounded-8px ml-16px hover:opacity-80">预约演示</NuxtLink>
            </div>
          </div>
          <div class="small blue-bg" :class="activeIndex !== 3 ? 'active' : ''">
            <div class="text-size-32px text-hex-9155FF font-normal" style="font-family: AlimamaShuHeiTi, AlimamaShuHeiTi">中/大型企业</div>
            <div>
              <p class="text-size-28px leading-40px text-hex-9155FF font-semibold tracking-4px">灵活高效</p>
              <p class="text-size-28px leading-40px text-hex-9155FF font-semibold tracking-4px">的管理平台</p>
            </div>
          </div>
        </div>

        <div class="red-box" :class="activeIndex === 4 ? 'big-box' : 'small-box'" @mouseover="activeIndex = 4">
          <img class="absolute w-200px h-200px -right-50px top-140px" :class="activeIndex === 4 ? 'big-pic' : 'small-pic'" src="/public/images/home/tissues/zfbzf.png" alt="政府保租房" />
          <div class="big red-bg" :class="activeIndex === 4 ? 'active' : ''">
            <div class="text-size-40px text-hex-FF5951 font-bold" style="font-family: AlimamaShuHeiTi, AlimamaShuHeiTi">政府保租房</div>
            <div class="w-212px h-42px text-center leading-42px text-size-20px text-hex-FF5951 font-normal mt-36px rounded-21px" style="background: rgba(255, 89, 81, 0.1)">高效全面的解决方案</div>
            <ul class="mt-30px">
              <li class="text-hex-333 leading-32px text-size-18px font-normal">全面管理房源、财务和智能设备</li>
              <li class="text-hex-333 leading-32px text-size-18px font-normal">自动化流程和数据分析</li>
              <li class="text-hex-333 leading-32px text-size-18px font-normal">提升运营效率</li>
            </ul>
            <div class="flex mt-60px text-size-18px text-center">
              <NuxtLink class="w-152px h-50px bg-hex-FF5951 leading-50px text-white rounded-8px text-size-18px hover:opacity-80" to="https://saas.byteox.com">免费试用</NuxtLink>
              <NuxtLink class="w-152px h-50px bg-white leading-50px border-hex-FF5951 text-hex-FF5951 border-solid border-1px rounded-8px ml-16px hover:opacity-80">预约演示</NuxtLink>
            </div>
          </div>
          <div class="small red-bg" :class="activeIndex !== 4 ? 'active' : ''">
            <div class="text-size-32px text-hex-FF5951 font-normal" style="font-family: AlimamaShuHeiTi, AlimamaShuHeiTi">政府保租房</div>
            <div>
              <p class="text-size-28px leading-40px text-hex-FF5951 font-semibold tracking-4px">高效全面</p>
              <p class="text-size-28px leading-40px text-hex-FF5951 font-semibold tracking-4px">的解决方案</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="w-full mt-220px px-48">
      <h2 class="text-size-44px leading-62px text-center">多种产品形态，满足您的个性化需求</h2>
      <div class="flex justify-center items-center mt-100px">
        <div v-for="(card, index) in cardList" :key="index" class="need-card" :class="currentCard === index ? 'active' : ''" @mouseover="toggleCard(index)" @mouseleave="startCountTime()">
          <h4 class="text-size-32px leading-54px font-bold" :class="currentCard === index ? 'active-h4' : ''" style="font-family: AlimamaShuHeiTi, AlimamaShuHeiTi">{{ card.title }}</h4>
          <div class="w-220px h-1px mt-30px" style="background: linear-gradient(138deg, #ff6fab 0%, #4586ff 100%)"></div>
          <div class="text-size-22px font-normal mt-50px">{{ card.subTitle }}</div>
          <p class="text-hex-777 text-size-18px text-justify leading-25px mt-11px">{{ card.content }}</p>
          <ul :class="currentCard == index ? 'mt-34px' : 'mt-50px'">
            <li class="text-hex-3271FF text-size-18px font-normal leading-30px">
              <span class="icon-font" style="font-size: 18px">&#xe670;</span>
              <span class="ml-4px">{{ card.items[0] }}</span>
            </li>
            <li class="text-hex-3271FF text-size-18px font-normal leading-30px mt-10px">
              <span class="icon-font" style="font-size: 18px">&#xe670;</span>
              <span class="ml-4px">{{ card.items[1] }}</span>
            </li>
            <li class="text-hex-3271FF text-size-18px font-normal leading-30px mt-10px">
              <span class="icon-font">&#xe670;</span>
              <span class="ml-4px">{{ card.items[2] }}</span>
            </li>
          </ul>
          <div v-show="currentCard == index" class="flex justify-between w-full mt-46px">
            <NuxtLink class="full-btn w-152px h-50px rounded-8px leading-50px" to="https://saas.byteox.com/#/login">免费试用</NuxtLink>
            <NuxtLink class="ghost-btn w-152px h-50px rounded-8px leading-50px ml-16px">预约演示</NuxtLink>
          </div>
          <img v-show="currentCard != index" class="w-120px h-120px absolute bottom-20px right-30px" :src="card.pic" :alt="card.title" />
        </div>
      </div>
    </section>
  </article>
</template>

<style scoped>
.tissue-container {
  position: absolute;
  left: 0;
  top: 86px;
  width: 100vw;
  height: 1582px;
  z-index: -1;
  background: url('/public/images/home/tissues/need-bg.png') no-repeat 0 0;
  background-size: 100% 100%;
}
.purple-btn {
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  background: #9155ff;
  @apply hover:opacity-80  active:(shadow-lg shadow-blue-400 transform transition-all duration-100);
}
.blue-box {
  background: linear-gradient(153deg, rgba(100, 171, 255, 0.1) 0%, rgba(10, 135, 248, 0.1) 100%);
  @apply relative rounded-16px h-440px overflow-hidden cursor-pointer mr-12px;
}
.purple-box {
  background: linear-gradient(153deg, rgba(100, 151, 255, 0.1) 0%, rgba(145, 85, 255, 0.1) 100%);
  @apply relative rounded-16px h-440px overflow-hidden cursor-pointer mr-12px;
}
.red-box {
  background: linear-gradient(153deg, rgba(248, 149, 10, 0.1) 0%, rgba(255, 107, 100, 0.1) 100%);
  @apply relative rounded-16px h-440px overflow-hidden cursor-pointer  mr-12px;
}
.big-box {
  width: 414px;
  transition: width 0.3s ease;
}
.small-box {
  width: 250px;
  transition: width 0.3s ease;
}
.big {
  position: absolute;
  left: 0;
  top: 0;
  width: 414px;
  height: 440px;
  padding: 30px 34px;
  opacity: 0;
  transform: translate(-414px, 0);
  transition: all 0.5s;
}
.big.active {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 0.5s;
}
.small {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 440px;
  padding: 40px 20px;
  opacity: 0;
  transform: translate(-100%, 0);
  transition: all 0.4s;
}
.small.active {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 0.3s;
}
.big-pic {
  transform: translate(0, 0);
  transition: all 0.6s;
}
.small-pic {
  transform: translate(50px, 0);
  transition: all 0.6s;
}
.blue-bg {
  background: url('/public/images/home/tissues/blue-bg.png') no-repeat;
  background-size: 100% auto;
  background-position: left bottom;
}
.purple-bg {
  background: url('/public/images/home/tissues/purple-bg.png') no-repeat;
  background-size: 100% auto;
  background-position: left bottom;
}
.red-bg {
  background: url('/public/images/home/tissues/red-bg.png') no-repeat;
  background-size: 100% auto;
  background-position: left bottom;
}

.need-card {
  position: relative;
  width: 372px;
  min-height: 500px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.1);
  border-radius: 16px;
  cursor: pointer;
  border: 1px solid #f2f2f2;
  padding: 50px 30px 44px 30px;
  z-index: 0;
  margin: 0 16px;
  transform: scale(1);
  transition: all 0.25s;
}
.need-card.active {
  background: linear-gradient(156deg, #dce6ff 0%, #f5f8ff 26%, #ffffff 100%);
  box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.2);
  border: 2px solid rgba(111, 186, 255, 1);
  margin: 0 16px;
  z-index: 20;
  transform: scale(1.06);
  transition: all 0.25s;
}
.active-h4 {
  background: linear-gradient(321.9155874301634deg, #6190ff 0%, #3271ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
</style>
